/*
 * One Shot design system
 * ----------------------
 * Cool basalt ground, cool off-white ink, and exactly two accents used as signals:
 * hydrangea (--gold) for CTAs, active state and price; mint (--mint) for success and "included".
 * The accent token keeps its --gold name on purpose: it is the accent SLOT, named once and
 * referenced from every component and from config.x.brand_colors. Renaming it would touch
 * every view for no behavioural gain.
 * Separation comes from 1px rules and one raised surface -- no shadows, no gradients, no
 * blur. Cards are square; 2px is the maximum radius anywhere. Archivo for everything,
 * JetBrains Mono for labels, nav, buttons, code and numbers.
 *
 * This is the single source of truth for the look of both the marketing site and the app
 * buyers build -- change tokens here and everything follows.
 *
 * Propshaft does NOT bundle: `stylesheet_link_tag :app` emits one <link> per file in this
 * directory, SORTED BY FILENAME (propshaft/helper.rb -> asset_paths_by_glob). Load order is
 * therefore the filename and nothing else, which is why 00-fonts.css is numbered.
 */

/*
 * Load order is the FILENAME, and nothing else.
 *
 * Propshaft does not bundle: `stylesheet_link_tag :app` emits one <link> per .css file in this
 * directory, sorted by logical path (propshaft/helper.rb -> app_stylesheets_paths ->
 * asset_paths_by_glob, which returns "a sorted and unique array"). The 0N- prefixes below ARE
 * the cascade. The four unprefixed files -- blog, docs, highlight, showcase -- sort after every
 * numbered one, which is where they belong: each is page-scoped and overrides the core.
 *
 * Do not rename the unprefixed files. showcase.css is listed in delivery/deny.txt by exact path,
 * and that script strips with `rm -rf` on a path that silently no-ops when it is stale -- a
 * rename there would ship shiponeshot.com's own marketing CSS to every buyer with no error.
 */

/* ---------------------------------------------------------------- Tokens --- */
/* The whole palette, and nothing outside it.
 *
 * Hex rather than oklch, and that is load-bearing: the transactional emails and the OG card
 * templates need these same values as literal Ruby strings, and email clients do not support
 * oklch. config.x.brand_colors mirrors this block, and spec/design/brand_tokens_spec.rb fails
 * if the two ever disagree.
 *
 * Two accents, used as signals only: hydrangea for CTAs, active state and price; mint for success
 * and "included". Neither belongs on body text, and neither is a large fill except the primary
 * button and the one highlighted card in a view.
 */
:root {
  /* Surfaces. Separation comes from 1px rules and one raised step -- never a shadow. */
  --bg:         #0f1016;   /* the page */
  --bg-raised:  #15161e;   /* cards, panels, table header rows, the app sidebar */
  --bg-accent:  #1b1d27;   /* the ONE highlighted card in a view (current plan, annual tier) */

  /* Hairlines, weakest first. Everything that draws a line uses one of these. */
  --rule:       rgba(236, 233, 243, 0.10);
  --rule-soft:  rgba(236, 233, 243, 0.07);  /* rules INSIDE a card */
  --rule-faint:  rgba(236, 233, 243, 0.08);  /* showcase row separators */
  --rule-strong: rgba(236, 233, 243, 0.12);  /* the share card's foot rule */
  --border-chip: rgba(236, 233, 243, 0.14);  /* the app-store chips */
  --border-link: rgba(236, 233, 243, 0.18);  /* the hero's secondary link underline */
  --border-btn:  rgba(236, 233, 243, 0.24);  /* the outlined plan button */

  /* Text, darkest-allowed last. --muted is the floor: --dim does not clear 4.5:1 on --bg, so
     it is for index numerals and ornament only and must never carry a word anyone has to read. */
  --ink:        #ece9f3;   /* headings, primary text */
  --ink-2:      #cbc7d8;   /* body copy, long-form prose */
  --ink-3:      #b2adc2;   /* list items, supporting copy */
  --ink-4:      #9a94ab;   /* nav links, section supporting copy */
  --muted:      #8e879f;   /* labels, eyebrows, meta */
  --dim:        #5f5972;   /* numerals and ornament ONLY */
  --glyph:      #3e3a4c;   /* the + bullet */
  --glyph-2:    #494455;   /* the × spec-row bullet */

  /* Accent 1 of 2. */
  --gold:       #a892f5;
  /* Mixed against --ink rather than picked by eye, so hover stays inside the palette. */
  --gold-hover: color-mix(in srgb, #a892f5 85%, #ece9f3);
  --gold-35:    rgba(168, 146, 245, 0.35);   /* the mobile caveat panel */
  --gold-45:    rgba(168, 146, 245, 0.45);   /* card hover border */

  /* Accent 2 of 2. */
  --mint:       #6fd39b;

  /* Destructive only. Never decorative. */
  --danger:     #e0836b;

  /* Type */
  --font-sans: "Archivo", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Rhythm */
  --container:  1240px;
  --measure:    640px;
  --gutter:     clamp(20px, 4vw, 40px);
  --col-gap:    24px;
  --section-y:  clamp(60px, 8vw, 96px);
  --sidebar-w:  240px;

  /* The fixed 10-column hairline grid behind every marketing page. */
  --grid-line:  rgba(236, 233, 243, 0.055);

  /* Radii. 2px is the ceiling anywhere, and cards are square. */
  --r-card:  0;
  --r-btn:   2px;
  --r-input: 2px;
  --r-pill:  2px;
  --r-chip:  2px;

  /* Motion: colour and border only, 120-180ms. Nothing transforms, nothing lifts. */
  --motion: 150ms ease;
}