/* Design tokens. No hard-coded colour, spacing or font size anywhere else in the CSS.

   The look is "a gallery on canvas" (ADR-0011): a warm primed-canvas background with a fine grain
   and weave, an editorial serif for headings, artworks hung with a mat and a wall shadow, and
   captions set like museum labels. Art-Online's red is the one accent: the primary button, links,
   brush strokes and the red dot galleries stick beside a sold work.

   Theme: <html data-theme="light|dark"> is set by the server from the bp-theme cookie. With no
   attribute yet (a first visit, before the welcome dialog is answered) the device setting decides,
   which is why the dark values appear twice below. Keep the two dark blocks identical. */

@layer tokens, reset, base, layout, components, pages, utilities, overrides;

@layer tokens {
  :root {
    color-scheme: light;

    /* Brand: Art-Online red, used sparingly, like a signature */
    --bp-brand-900: #5E0A0A;
    --bp-brand-800: #8A0000;   /* text accents on canvas */
    --bp-brand-700: #8A0000;   /* primary hover */
    --bp-brand-600: #AA0000;   /* primary: buttons, links, brush strokes, the sold dot */
    --bp-brand-200: #E6B9B0;
    --bp-brand-100: #F4DDD6;
    --bp-brand-50:  #FBF0EB;

    /* A second, earthy pigment for small painted details (ochre) */
    --bp-ochre-500: #C98A2B;
    --bp-ochre-100: #F5E8CF;

    /* Functional colours: green for available, amber for low stock */
    --bp-leaf-500: #7FA650;
    --bp-leaf-700: #3F6B25;
    --bp-leaf-50:  #EAF1E1;
    --bp-marigold-400: #E9B04A;
    --bp-marigold-100: #F8ECD2;
    --bp-marigold-800: #7A4A00;

    /* Neutrals: primed canvas, a white mat, charcoal ink */
    --bp-paper:   #FAF7F1;   /* the canvas the whole site is painted on */
    --bp-paper-2: #F2ECE2;   /* a deeper wall for featured sections */
    --bp-surface: #FFFFFF;   /* panels, drawers, dialogs */
    --bp-mat:     #FFFFFF;   /* the mat round every artwork */
    --bp-line:        #E4DCCD;
    --bp-line-strong: #CDC2AE;
    --bp-ink:   #1C1A17;
    --bp-ink-2: #58524A;
    --bp-ink-3: #7A7266;
    --bp-heading: #141210;
    --bp-danger:    #B42318;
    --bp-danger-50: #FDECEA;
    --bp-focus: #AA0000;
    --bp-star: #C98A2B;

    /* Canvas grain (dots) and weave (hairlines) painted on <body> */
    --bp-texture: rgb(90 70 40 / .05);
    --bp-weave: rgb(90 70 40 / .016);

    /* Theme-aware helpers */
    --bp-on-primary: #FFFFFF;
    --bp-on-dark: #E9E2D6;
    --bp-footer-bg: #1C1A17;
    --bp-heart: #B8284F;
    --bp-toast-icon: #FF9C9C;
    --bp-scrim: rgb(28 20 12 / .5);
    --bp-white: #FFFFFF;
    --bp-on-dark-rule: rgb(255 255 255 / .12);
    --bp-on-accent: #1D1A1A;

    /* Welcome-dialog theme previews: each theme's real colours, whichever theme is active. */
    --preview-light-paper: #FAF7F1;
    --preview-light-card: #FFFFFF;
    --preview-light-ink: #141210;
    --preview-light-line: #E4DCCD;
    --preview-light-accent: #AA0000;
    --preview-light-grain: rgb(90 70 40 / .09);
    --preview-dark-paper: #171512;
    --preview-dark-card: #24211D;
    --preview-dark-ink: #F2ECE2;
    --preview-dark-line: #3A352F;
    --preview-dark-accent: #F0766C;
    --preview-dark-grain: rgb(255 238 210 / .07);

    /* Image placeholder stripes */
    --ph-lav-a: #EEE9EC;  --ph-lav-b: #F5F1F3;
    --ph-sand-a: #EFE8DD; --ph-sand-b: #F6F1EA;
    --ph-sage-a: #E6EBE0; --ph-sage-b: #EFF2EA;
    --ph-sky-a: #E3E8EE;  --ph-sky-b: #ECF0F4;
    --ph-rose-a: #F2E3E3; --ph-rose-b: #F8EEEE;
    --ph-gold-a: #F2EAD6; --ph-gold-b: #F8F2E6;

    /* Type: Fraunces (an editorial serif with a real italic) for headings, Instrument Sans for
       text and labels, Caveat for the odd handwritten note. */
    --font-display: 'Fraunces', 'Iowan Old Style', Georgia, serif;
    --font-body: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-ui: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-hand: 'Caveat', 'Segoe Print', 'Bradley Hand', cursive;
    --font-mono: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
    --fw-display: 400;
    --fs-xs: 12px;
    --fs-sm: 14px;
    --fs-md: 16px;
    --fs-lg: 18px;
    --fs-xl: 24px;
    --fs-2xl: 30px;
    --fs-3xl: 38px;
    --fs-4xl: 46px;
    --fs-display: clamp(40px, 26px + 3.6vw, 72px);
    --lh-tight: 1.08;
    --lh-body: 1.6;

    /* Labels: small capitals with air between the letters, as on a gallery wall */
    --tracking-label: .14em;

    /* Spacing, 4px base */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-8: 32px;
    --space-10: 40px;
    --space-12: 48px;
    --space-16: 64px;
    --space-20: 80px;
    --space-24: 96px;

    /* Radii: crisp. Art hangs square; only controls soften a little. */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 8px;
    --radius-xl: 10px;
    --radius-pill: 999px;

    /* The mat round an artwork, and the shadow of a work hung on a wall (and lifted on hover) */
    --mat: 10px;
    --mat-lg: 18px;
    --shadow-hang: 0 1px 1px rgb(60 40 20 / .06), 0 8px 12px -6px rgb(60 40 20 / .16), 0 22px 34px -18px rgb(60 40 20 / .28);
    --shadow-lift: 0 2px 2px rgb(60 40 20 / .06), 0 16px 22px -8px rgb(60 40 20 / .2), 0 36px 50px -22px rgb(60 40 20 / .34);

    /* Shadows for UI */
    --shadow-sm: 0 1px 2px rgb(40 26 12 / .06), 0 1px 1px rgb(40 26 12 / .04);
    --shadow-md: 0 10px 28px -12px rgb(40 26 12 / .25);
    --shadow-lg: 0 28px 64px -18px rgb(40 26 12 / .4);

    /* Motion */
    --dur: 180ms;
    --dur-slow: 420ms;
    --ease: cubic-bezier(.2, .7, .2, 1);

    /* Layout */
    --container-max: 1320px;
    --gutter: 16px;
    --control-h: 44px;
    /* What the phone tab bar covers at the bottom of the screen (tab-bar.css sets it while the bar
       shows); anything fixed to the bottom sits above it. */
    --tab-bar-h: 0px;
    --z-sticky: 20;
    --z-header: 30;
    --z-drawer: 60;
    --z-toast: 80;

    /* Status colours, shared by seller and admin surfaces */
    --c-status-draft: var(--bp-ink-3);
    --c-status-pending: var(--bp-marigold-800);
    --c-status-approved: var(--bp-leaf-700);
    --c-status-rejected: var(--bp-danger);
    --c-status-paused: var(--bp-brand-600);
    --c-status-suspended: var(--bp-danger);
  }

  @media (min-width: 820px) {
    :root { --gutter: 32px; }
  }

  /* Dark: "the gallery after hours". Warm charcoal walls, off-white ink, a softer red. */
  :root[data-theme="dark"] {
    color-scheme: dark;
    --bp-brand-900: #120807;
    --bp-brand-800: #F7A69E;
    --bp-brand-700: #F58E85;
    --bp-brand-600: #F0766C;
    --bp-brand-200: #5C2C28;
    --bp-brand-100: #3D1E1B;
    --bp-brand-50:  #2A1715;
    --bp-ochre-500: #E0A54A;
    --bp-ochre-100: #3A2D17;
    --bp-leaf-700: #A9D872;
    --bp-leaf-50:  #1F2916;
    --bp-marigold-100: #3A2D12;
    --bp-marigold-800: #F4C76A;
    --bp-paper:   #171512;
    --bp-paper-2: #1F1C18;
    --bp-surface: #24211D;
    --bp-mat:     #2C2824;
    --bp-line:        #3A352F;
    --bp-line-strong: #554D44;
    --bp-ink:   #F2ECE2;
    --bp-ink-2: #CEC5B8;
    --bp-ink-3: #A69C8E;
    --bp-heading: #FFFFFF;
    --bp-danger:    #FF8B7B;
    --bp-danger-50: #3A1A16;
    --bp-focus: #F58E85;
    --bp-star: #E0A54A;
    --bp-texture: rgb(255 238 210 / .045);
    --bp-weave: rgb(255 238 210 / .018);
    --shadow-hang: 0 1px 1px rgb(0 0 0 / .3), 0 10px 16px -6px rgb(0 0 0 / .5), 0 24px 36px -18px rgb(0 0 0 / .6);
    --shadow-lift: 0 2px 2px rgb(0 0 0 / .3), 0 18px 24px -8px rgb(0 0 0 / .55), 0 40px 54px -22px rgb(0 0 0 / .7);
    --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
    --shadow-md: 0 12px 30px -12px rgb(0 0 0 / .6);
    --shadow-lg: 0 28px 64px -18px rgb(0 0 0 / .7);
    --bp-on-primary: #1A0503;
    --bp-footer-bg: #0F0E0C;
    --bp-heart: #FF7AA8;
    --bp-toast-icon: #AA0000;
    --bp-scrim: rgb(0 0 0 / .65);
    --ph-lav-a: #242022;  --ph-lav-b: #2A2528;
    --ph-sand-a: #28241F; --ph-sand-b: #2E2924;
    --ph-sage-a: #222620; --ph-sage-b: #282C25;
    --ph-sky-a: #20242A;  --ph-sky-b: #252A30;
    --ph-rose-a: #2B2020; --ph-rose-b: #312525;
    --ph-gold-a: #2B271E; --ph-gold-b: #312C22;
  }

  @media (prefers-color-scheme: dark) {
    :root:not([data-theme]) {
      color-scheme: dark;
      --bp-brand-900: #120807;
      --bp-brand-800: #F7A69E;
      --bp-brand-700: #F58E85;
      --bp-brand-600: #F0766C;
      --bp-brand-200: #5C2C28;
      --bp-brand-100: #3D1E1B;
      --bp-brand-50:  #2A1715;
      --bp-ochre-500: #E0A54A;
      --bp-ochre-100: #3A2D17;
      --bp-leaf-700: #A9D872;
      --bp-leaf-50:  #1F2916;
      --bp-marigold-100: #3A2D12;
      --bp-marigold-800: #F4C76A;
      --bp-paper:   #171512;
      --bp-paper-2: #1F1C18;
      --bp-surface: #24211D;
      --bp-mat:     #2C2824;
      --bp-line:        #3A352F;
      --bp-line-strong: #554D44;
      --bp-ink:   #F2ECE2;
      --bp-ink-2: #CEC5B8;
      --bp-ink-3: #A69C8E;
      --bp-heading: #FFFFFF;
      --bp-danger:    #FF8B7B;
      --bp-danger-50: #3A1A16;
      --bp-focus: #F58E85;
      --bp-star: #E0A54A;
      --bp-texture: rgb(255 238 210 / .045);
      --bp-weave: rgb(255 238 210 / .018);
      --shadow-hang: 0 1px 1px rgb(0 0 0 / .3), 0 10px 16px -6px rgb(0 0 0 / .5), 0 24px 36px -18px rgb(0 0 0 / .6);
      --shadow-lift: 0 2px 2px rgb(0 0 0 / .3), 0 18px 24px -8px rgb(0 0 0 / .55), 0 40px 54px -22px rgb(0 0 0 / .7);
      --shadow-sm: 0 1px 2px rgb(0 0 0 / .4);
      --shadow-md: 0 12px 30px -12px rgb(0 0 0 / .6);
      --shadow-lg: 0 28px 64px -18px rgb(0 0 0 / .7);
      --bp-on-primary: #1A0503;
      --bp-footer-bg: #0F0E0C;
      --bp-heart: #FF7AA8;
      --bp-toast-icon: #AA0000;
      --bp-scrim: rgb(0 0 0 / .65);
      --ph-lav-a: #242022;  --ph-lav-b: #2A2528;
      --ph-sand-a: #28241F; --ph-sand-b: #2E2924;
      --ph-sage-a: #222620; --ph-sage-b: #282C25;
      --ph-sky-a: #20242A;  --ph-sky-b: #252A30;
      --ph-rose-a: #2B2020; --ph-rose-b: #312525;
      --ph-gold-a: #2B271E; --ph-gold-b: #312C22;
    }
  }
}