/* backend/src/main/resources/static/modules_styles/starter_standard/theme.css */

/* ==============================================
   THEME DEFINITIONS — starter-standard

   Two prints, both of which really existed
   (ai-context/pikiner/blueprint-composition.md):

   Dark  — cyanotype: white ink on Prussian blue.
   Light — diazotype: blue ink on cream paper.

   The mapping gives the light theme an identity of its own instead of a
   mechanical inversion of the dark one. Overrides gabion-contract.css
   :root fallbacks; all required variables from
   gabion-contract-required.json are defined in both .page-light and
   .page-dark.
   ============================================== */

/* ==============================================
   SCALE — theme-independent starter obligations.

   Declared in :root, not per theme: a font size does not change with
   the color scheme, and requiring it in both theme contexts would be
   a false duplication. Checked by the CSS contract validator against
   requiredRoot in gabion-contract-required.json — color is not the
   starter's only obligation; the rhythm (type, spacing, radius,
   content widths) belongs to it too. Values here override the
   infrastructure fallbacks in gabion-contract.css.
   ============================================== */

:root {
  /* The faces themselves are declared in fonts.css and served from
     fonts/ beside it; the fallbacks behind them are the platform stack
     that used to be the whole value, kept for the moment before the
     webfont paints and for the reader who blocks webfonts outright. */
  --gb-font-primary: "IBM Plex Sans", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
  --gb-font-mono: "IBM Plex Mono", "SF Mono", "Fira Code", "Fira Mono",
    "Roboto Mono", Menlo, monospace;

  /* Headings: the text face at bold — the face and the weight it is a
     heading at are one decision, declared together. A project with a
     display face of its own names it here with the weight that face
     reads as a heading at. */
  --gb-font-heading: var(--gb-font-primary);
  --gb-font-heading-weight: 700;

  /* === TYPOGRAPHY — type roles ===
     A role is a triple (size, leading, tracking) chosen by the job of
     the text, not by its size: leading is a function of size (display
     sizes sit tight, running text needs air), and tracking flips sign
     with size (large type is tightened, small uppercase is opened). The
     three axes are separate properties so a component may take a role's
     size and keep its own leading (a button's line box is geometry).
     Heading sizes ramp linearly between a 390px and a 1024px viewport
     (30→40, 24→28, 20→22 px); every other role is fixed. A project that
     prefers stepped sizes redefines the -size tokens inside @media
     blocks on :root in this file — consumers never write a media query
     for a type role. Values are the template's defaults, set in IBM
     Plex Sans; a project tunes them here. */
  --gb-type-heading-1-size: clamp(1.875rem, 1.49rem + 1.58vw, 2.5rem);
  --gb-type-heading-1-leading: 1.12;
  --gb-type-heading-1-tracking: -0.015em;

  --gb-type-heading-2-size: clamp(1.5rem, 1.35rem + 0.63vw, 1.75rem);
  --gb-type-heading-2-leading: 1.2;
  --gb-type-heading-2-tracking: -0.01em;

  --gb-type-heading-3-size: clamp(1.25rem, 1.17rem + 0.32vw, 1.375rem);
  --gb-type-heading-3-leading: 1.3;
  --gb-type-heading-3-tracking: -0.005em;

  --gb-type-lead-size: 1.1875rem;
  --gb-type-lead-leading: 1.35;
  --gb-type-lead-tracking: 0;

  --gb-type-body-size: 1.0625rem;
  --gb-type-body-leading: 1.65;
  --gb-type-body-tracking: 0;

  --gb-type-secondary-size: 0.9375rem;
  --gb-type-secondary-leading: 1.55;
  --gb-type-secondary-tracking: 0;

  --gb-type-caption-size: 0.8125rem;
  --gb-type-caption-leading: 1.45;
  --gb-type-caption-tracking: 0.01em;

  /* Overline: short uppercase label; the tracking assumes
     text-transform: uppercase on the consumer. */
  --gb-type-overline-size: 0.875rem;
  --gb-type-overline-leading: 1.4;
  --gb-type-overline-tracking: 0.045em;

  --gb-spacing-xs: 0.25rem;
  --gb-spacing-sm: 0.5rem;
  --gb-spacing-md: 1rem;
  --gb-spacing-lg: 1.5rem;
  --gb-spacing-xl: 2rem;
  --gb-spacing-2xl: 3rem;
  --gb-spacing-3xl: 4rem;

  --gb-radius-sm: 4px;
  --gb-radius-md: 8px;
  --gb-radius-lg: 12px;
  --gb-radius-xl: 16px;
  --gb-radius-full: 9999px;

  --gb-content-max-width: 1200px;
  --gb-content-narrow: 800px;
  --gb-content-wide: 1440px;
  --gb-content-ultrawide: 1920px;

  /* Measure: the comfortable line length of running text, a property
     of the type (≈66–75 characters at the body size), not of the
     layout. The --gb-content-* widths size columns and cards; a text
     column at 800px runs ~88 characters and the eye loses the start of
     the next line. In rem so it scales with the type, not with the
     font's glyph width. */
  --gb-measure: 46rem;

  /* Section gap: the rhythm between page sections. A different kind of
     distance from the spacing scale (component padding and gaps), not
     its next step — a larger step would leak into component spacing.
     Ramps with the viewport (80→160px), so sections need no media
     query for their vertical rhythm. */
  --gb-section-gap: clamp(5rem, 3rem + 5vw, 10rem);
}

.page-light {
  /* Background — diazo paper: cream, not white */
  --gb-bg-primary: #f3efe6;
  --gb-bg-surface: #ebe5d6;
  --gb-bg-elevated: #faf8f1;
  --gb-bg-inset: #e3dbc8;

  /* Text — the blue ink of a diazo print, WCAG AA on all backgrounds */
  --gb-text-primary: #10314e;
  --gb-text-secondary: #3f607e;
  --gb-text-tertiary: #45617c;
  --gb-text-heading: #0a2540;
  --gb-text-on-accent: #ffffff;

  /* Border — the same ink, thinned */
  --gb-border-default: rgba(16, 49, 78, 0.25);
  --gb-border-subtle: rgba(16, 49, 78, 0.12);
  --gb-border-strong: rgba(16, 49, 78, 0.45);

  /* Accent — the red pencil a checker annotates a drawing with */
  --gb-accent-primary: #a83e27;
  --gb-accent-hover: #8f3521;
  --gb-accent-subtle: rgba(168, 62, 39, 0.08);

  /* Accent — surface: action background carrying --gb-text-on-accent */
  --gb-accent-surface: #a83e27;
  --gb-accent-surface-hover: #8f3521;

  /* Semantic — signal: draws the eye (icons, borders, fills) */
  --gb-color-success: #16a34a;
  --gb-color-warning: #d97706;
  --gb-color-error: #dc2626;
  --gb-color-info: #2563eb;
  --gb-color-purple: #8e24aa;

  /* Semantic — text: same meaning, readable as words (≥4.5:1 on cream) */
  --gb-color-success-text: #166534;
  --gb-color-warning-text: #8a3d0e;
  --gb-color-error-text: #b02222;
  --gb-color-info-text: #1d4ed8;
  --gb-color-purple-text: #7b1fa2;

  /* Semantic — subtle: translucent fills for badges and callouts */
  --gb-color-success-subtle: color-mix(in srgb, var(--gb-color-success) 8%, transparent);
  --gb-color-warning-subtle: color-mix(in srgb, var(--gb-color-warning) 8%, transparent);
  --gb-color-error-subtle: color-mix(in srgb, var(--gb-color-error) 8%, transparent);
  --gb-color-info-subtle: color-mix(in srgb, var(--gb-color-info) 8%, transparent);
  --gb-color-purple-subtle: color-mix(in srgb, var(--gb-color-purple) 8%, transparent);

  /* Semantic — surface: fills carrying --gb-text-on-accent */
  --gb-color-error-surface: #b91c1c;
  --gb-color-error-surface-hover: color-mix(in srgb, var(--gb-color-error-surface), black 17%);
  --gb-color-success-surface: #15803d;

  /* Shadows — ink tint */
  --gb-shadow-sm: 0 1px 2px rgba(16, 49, 78, 0.08);
  --gb-shadow-md: 0 2px 8px rgba(16, 49, 78, 0.12);
  --gb-shadow-lg: 0 8px 24px rgba(16, 49, 78, 0.18);
}

.page-dark {
  /* Background — cyanotype: Prussian blue, not near-black */
  --gb-bg-primary: #0d2f4b;
  --gb-bg-surface: #113a59;
  --gb-bg-elevated: #164464;
  --gb-bg-inset: #0a2740;

  /* Text — the white lines of a cyanotype */
  --gb-text-primary: #e6eef5;
  --gb-text-secondary: #a7bfd2;
  --gb-text-tertiary: #96b1c7;
  --gb-text-heading: #f4f8fb;
  --gb-text-on-accent: #ffffff;

  /* Border — white lines, thinned */
  --gb-border-default: rgba(230, 238, 245, 0.14);
  --gb-border-subtle: rgba(230, 238, 245, 0.08);
  --gb-border-strong: rgba(230, 238, 245, 0.28);

  /* Accent — the red pencil, lifted to hold ≥4.5:1 on the SHEET
     (--gb-bg-elevated), the lightest surface running text sits on —
     the blue field below it is darker still */
  --gb-accent-primary: #f49d7d;
  --gb-accent-hover: #f8b9a2;
  --gb-accent-subtle: rgba(244, 157, 125, 0.12);

  /* Accent — surface: darker than the accent, because the white label on
     it needs ≥4.5:1 while the link color is tuned for the blue field */
  --gb-accent-surface: #b8452c;
  --gb-accent-surface-hover: #9c3a24;

  /* Semantic — signal: draws the eye (icons, borders, fills) */
  --gb-color-success: #22c55e;
  --gb-color-warning: #f59e0b;
  --gb-color-error: #ef4444;
  --gb-color-info: #3b82f6;
  --gb-color-purple: #ab47bc;

  /* Semantic — text: readable as words on the blue field (≥4.5:1) */
  --gb-color-success-text: #4ade80;
  --gb-color-warning-text: #fbbf24;
  --gb-color-error-text: #fa8f8f;
  --gb-color-info-text: #7cb8fa;
  --gb-color-purple-text: #ce93d8;

  /* Semantic — subtle: translucent fills for badges and callouts */
  --gb-color-success-subtle: color-mix(in srgb, var(--gb-color-success) 12%, transparent);
  --gb-color-warning-subtle: color-mix(in srgb, var(--gb-color-warning) 12%, transparent);
  --gb-color-error-subtle: color-mix(in srgb, var(--gb-color-error) 12%, transparent);
  --gb-color-info-subtle: color-mix(in srgb, var(--gb-color-info) 12%, transparent);
  --gb-color-purple-subtle: color-mix(in srgb, var(--gb-color-purple) 12%, transparent);

  /* Semantic — surface: same values as light, the white label defines
     the contrast, not the page behind the button. The hover is a plain
     value, darker than the surface, so both button surfaces of this
     theme answer the pointer the same way. */
  --gb-color-error-surface: #b91c1c;
  --gb-color-error-surface-hover: #991b1b;
  --gb-color-success-surface: #15803d;

  /* Shadows — the depth of the field */
  --gb-shadow-sm: 0 1px 2px rgba(2, 12, 22, 0.4);
  --gb-shadow-md: 0 2px 8px rgba(2, 12, 22, 0.5);
  --gb-shadow-lg: 0 8px 24px rgba(2, 12, 22, 0.6);
}