/* ==========================================================================
   In7 In — Design Tokens
   Bold, utility-first download directory. Retro energy, dense blocks,
   strong call-to-action contrast. Mostly flat: depth comes from colour
   blocking and border clarity, not shadows.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600;700&display=swap');

:root {
  /* ---- Brand colours ---- */
  --c-primary:        #104db9;   /* cobalt blue — primary CTA */
  --c-primary-strong: #0d3d94;
  --c-primary-deep:   #092c6e;
  --c-primary-soft:   #e7eefb;
  --c-secondary:      #929a7c;   /* muted olive — secondary CTA */
  --c-secondary-deep: #78805f;
  --c-tertiary:       #a01616;   /* brick red — top bar + emphasis */
  --c-tertiary-deep:  #7d1111;
  --c-tertiary-soft:  #f6e2e2;
  --c-neutral:        #c7c29f;   /* signature warm khaki canvas */
  --c-neutral-deep:   #b3ad87;
  --c-neutral-soft:   #ded9b8;
  --c-surface:        #f7f3e6;   /* off-white surface */
  --c-surface-bright: #fffdf5;
  --c-on-surface:     #0f172a;
  --c-text:           #334155;
  --c-text-soft:      #5b6675;
  --c-success:        #f7f000;   /* bright yellow — ratings, positive signal */
  --c-error:          #ef4444;

  /* ---- Semantic surfaces ---- */
  --canvas:           var(--c-neutral);
  --page:             var(--c-surface);

  /* ---- Typography ---- */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  --font-native: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif;

  --fs-display: 36px;
  --lh-display: 50.4px;
  --fs-hlg:     30px;
  --lh-hlg:     39px;
  --fs-hmd:     24px;
  --lh-hmd:     31.2px;
  --fs-hsm:     18px;
  --lh-hsm:     22px;
  --fs-blg:     20px;
  --lh-blg:     28px;
  --fs-bmd:     16px;
  --lh-bmd:     26.4px;
  --fs-bsm:     14px;
  --lh-bsm:     22px;
  --fs-lgl:     18px;
  --lh-lgl:     24px;
  --fs-lmd:     16px;
  --lh-lmd:     22px;
  --fs-lsm:     12px;
  --lh-lsm:     16px;

  /* ---- Shape ---- */
  --r-none: 0px;
  --r-sm: 8px;
  --r-md: 20px;
  --r-lg: 28px;
  --r-xl: 9999px;
  --r-full: 9999px;

  /* ---- Spacing ---- */
  --s-xs: 4px;
  --s-sm: 10px;
  --s-md: 16px;
  --s-lg: 20px;
  --s-xl: 30px;
  --s-gutter: 24px;
  --s-margin: 32px;

  /* ---- Borders (the only depth cue) ---- */
  --bd-hair:  1px solid rgba(15, 23, 42, 0.14);
  --bd-soft:  1px solid rgba(15, 23, 42, 0.10);
  --bd-hard:  2px solid var(--c-on-surface);
  --bd-blue:  2px solid var(--c-primary);
  --bd-red:   2px solid var(--c-tertiary);

  /* ---- Layout ---- */
  --wrap: 1180px;
  --wrap-narrow: 860px;
  --btn-h: 44px;
}