/*
  Scripture Journey design tokens.

  The only place raw colours, radii, shadows, spacing, and motion durations are
  defined. Components and pages must consume these variables rather than literal
  values, so the visual language can change in one place (spec 22).

  Tone: sunlit 3D storybook — the palette of a warm afternoon in an ancient
  town. Saturated teal, terracotta, and gold sit on sand and cream, the way the
  rendered character art the product is built around does. Colour and rounded,
  slightly over-scaled shapes carry the delight; type stays plain and legible.

  Child surfaces take the full treatment. Parent and admin surfaces share the
  palette but keep the quieter end of it (spec 22.3).
*/

:root {
  /* ---------- Colour: surfaces ---------- */
  --sj-color-canvas: #fff6e9;          /* sunlit sand app background */
  --sj-color-surface: #ffffff;
  --sj-color-surface-sunken: #fbebd5;
  --sj-color-surface-inverse: #143a3a;

  /* ---------- Colour: ink ---------- */
  --sj-color-ink: #2c1f17;             /* warm dark brown, not black */
  --sj-color-ink-muted: #6b554a;
  --sj-color-ink-subtle: #9a8578;
  --sj-color-ink-inverse: #fff9f0;

  /* ---------- Colour: brand ----------
     Teal is the robe colour that recurs through the character art, and it is
     the only colour used for a primary action. */
  --sj-color-primary: #0e7c7b;
  --sj-color-primary-hover: #0a6260;
  --sj-color-primary-soft: #d7f0ef;
  --sj-color-accent: #e8a02c;          /* warm gold: highlights, never text */
  --sj-color-accent-soft: #fff0d2;
  --sj-color-secondary: #a8431f;       /* terracotta */
  --sj-color-secondary-soft: #fce3d6;

  /* ---------- Colour: play ----------
     Extra hues so repeated elements — avatars, chips, rails, badges — can be
     told apart at a glance by a child who is not yet reading labels. */
  --sj-color-sky: #2e83bb;
  --sj-color-sky-soft: #ddf0fb;
  --sj-color-berry: #ac3d72;
  --sj-color-berry-soft: #fbe1ee;
  --sj-color-grape: #6b4e9e;
  --sj-color-grape-soft: #ece2fb;
  --sj-color-leaf: #4a7c34;
  --sj-color-leaf-soft: #e6f3dc;

  /* ---------- Colour: status ---------- */
  --sj-color-success: #2e7d5b;
  --sj-color-success-soft: #dff2e7;
  --sj-color-warning: #8a5310;
  --sj-color-warning-soft: #fdeecd;
  --sj-color-danger: #a83232;
  --sj-color-danger-soft: #fce0de;
  --sj-color-focus: #0e7c7b;

  /* ---------- Colour: lines ---------- */
  --sj-color-border: #f0dfc6;
  --sj-color-border-strong: #d9c2a2;

  /* ---------- Gradients ----------
     Used for large surfaces — heroes, headers, primary buttons, medals. Never
     behind body text, where a flat token colour keeps contrast predictable. */
  --sj-gradient-canvas: radial-gradient(
      120% 80% at 50% 0%,
      #fffdf6 0%,
      var(--sj-color-canvas) 55%,
      #ffeed6 100%
    );
  --sj-gradient-sun: linear-gradient(150deg, #ffd98e 0%, #f0a93a 100%);
  --sj-gradient-sky: linear-gradient(170deg, #cfeafb 0%, #8fcbea 100%);
  --sj-gradient-teal: linear-gradient(150deg, #14938f 0%, #0a6260 100%);
  --sj-gradient-terracotta: linear-gradient(150deg, #d9703f 0%, #a8431f 100%);
  --sj-gradient-dusk: linear-gradient(155deg, #2a5f74 0%, #143a3a 100%);

  /* ---------- Illustration palette ----------
     The colours the drawn artwork is made of, kept here rather than inline in
     each SVG so a change of art direction stays a one-file change. UI chrome
     never uses these; illustrations never use the chrome colours above. */
  --sj-art-cream: #fff6e6;
  --sj-art-linen: #f6e3c8;
  --sj-art-sand: #f3d3a3;
  --sj-art-sand-deep: #d9ae74;
  --sj-art-stone: #e8d5b8;
  --sj-art-stone-deep: #c2a279;
  --sj-art-sky: #bfe3f7;
  --sj-art-sky-deep: #7cc0e6;
  --sj-art-teal: #2fa3a0;
  --sj-art-teal-deep: #0e7c7b;
  --sj-art-terracotta: #d9703f;
  --sj-art-terracotta-deep: #a8431f;
  --sj-art-gold: #f2b23e;
  --sj-art-gold-deep: #d68a17;
  --sj-art-leaf: #5c9440;
  --sj-art-leaf-deep: #3d6a2a;
  --sj-art-wood: #8a5a35;
  --sj-art-wood-deep: #5f3c22;
  --sj-art-berry: #d1568f;
  --sj-art-berry-deep: #ac3d72;
  --sj-art-flame: #ffd166;
  --sj-art-flame-deep: #f4842d;
  --sj-art-skin: #f0c49c;
  --sj-art-skin-deep: #d8a074;
  --sj-art-hair: #4e3220;
  --sj-art-shade: rgba(74, 44, 22, 0.16);

  /* ---------- Typography ---------- */
  --sj-font-body: "Nunito", "Segoe UI Variable Text", "Segoe UI", system-ui,
    -apple-system, sans-serif;
  --sj-font-display: "Fraunces", "Segoe UI Variable Display", Georgia,
    "Times New Roman", serif;

  /* Child-facing text runs one step larger than parent/admin text. */
  --sj-text-2xs: 0.75rem;
  --sj-text-xs: 0.8125rem;
  --sj-text-sm: 0.9375rem;
  --sj-text-md: 1.0625rem;
  --sj-text-lg: 1.25rem;
  --sj-text-xl: 1.5rem;
  --sj-text-2xl: 1.875rem;
  --sj-text-3xl: 2.375rem;

  --sj-leading-tight: 1.2;
  --sj-leading-normal: 1.5;
  --sj-leading-relaxed: 1.7;

  --sj-weight-regular: 400;
  --sj-weight-medium: 600;
  --sj-weight-bold: 800;

  /* Child preference hook: multiplied into font-size on the app root. */
  --sj-text-scale: 1;

  /* ---------- Spacing (4px base) ---------- */
  --sj-space-1: 0.25rem;
  --sj-space-2: 0.5rem;
  --sj-space-3: 0.75rem;
  --sj-space-4: 1rem;
  --sj-space-5: 1.25rem;
  --sj-space-6: 1.5rem;
  --sj-space-8: 2rem;
  --sj-space-10: 2.5rem;
  --sj-space-12: 3rem;
  --sj-space-16: 4rem;

  /* ---------- Radii ----------
     Rounder than a standard app on purpose: nothing a child taps has a corner
     sharp enough to read as a form field. */
  --sj-radius-sm: 0.625rem;
  --sj-radius-md: 1rem;
  --sj-radius-lg: 1.5rem;
  --sj-radius-xl: 2rem;
  --sj-radius-blob: 2.75rem;
  --sj-radius-pill: 999px;

  /* ---------- Shadows ----------
     Tinted warm rather than grey, so cards look lit by the same sun as the
     artwork instead of floating on a neutral sheet. */
  --sj-shadow-sm: 0 1px 3px rgba(94, 58, 30, 0.08);
  --sj-shadow-md: 0 6px 18px rgba(94, 58, 30, 0.12);
  --sj-shadow-lg: 0 18px 40px rgba(94, 58, 30, 0.16);

  /* The "sticker" depth used by child-facing tap targets: a solid lower edge
     that compresses on press, which reads as physical to a young child. */
  --sj-lift: 0.25rem;

  /* A lit top edge. Paired with a shadow it reads as a raised object under the
     same sun as the artwork, rather than a rectangle with a drop shadow. */
  --sj-highlight-edge: inset 0 1px 0 rgba(255, 255, 255, 0.9);

  /* Frosted surfaces: the header, and anything that floats over content. */
  --sj-glass-surface: color-mix(in srgb, var(--sj-color-canvas) 72%, transparent);
  --sj-glass-border: color-mix(in srgb, #ffffff 60%, transparent);
  --sj-glass-blur: saturate(1.6) blur(14px);

  /* ---------- Touch targets ----------
     44px is the floor (spec 7.1); child primary actions use 56px. */
  --sj-touch-min: 2.75rem;
  --sj-touch-comfortable: 3.25rem;
  --sj-touch-child-primary: 3.5rem;

  /* ---------- Motion (purposeful, optional) ----------
     Still calm by default. The bounce easing is reserved for a child's own
     taps and for arrivals, never for anything that repeats unprompted. */
  --sj-duration-instant: 90ms;
  --sj-duration-fast: 180ms;
  --sj-duration-normal: 280ms;
  --sj-duration-slow: 520ms;
  --sj-ease-standard: cubic-bezier(0.2, 0, 0, 1);
  --sj-ease-decelerate: cubic-bezier(0, 0, 0, 1);
  --sj-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --sj-ease-spring: cubic-bezier(0.22, 1.2, 0.36, 1);

  /*
    Ambient durations are deliberately long. Anything that repeats without being asked for has to
    be slow enough that a child's eye does not keep returning to it — the product does not use
    motion to hold attention (spec 4, "no manipulative engagement mechanics").
  */
  --sj-duration-ambient: 28s;
  --sj-duration-ambient-slow: 54s;

  /* Delay added per item in a staggered reveal, multiplied by the item's index. */
  --sj-stagger-step: 55ms;

  /* ---------- Layout ---------- */
  --sj-content-max: 68rem;
  --sj-content-max-narrow: 34rem;
  /* For screens built around a picture, where 68rem left the artwork smaller than a laptop can
     show it. The story player is the caller; a text screen this wide would be unreadable. */
  --sj-content-max-wide: 84rem;
  --sj-header-height: 3.5rem;
  --sj-bottom-nav-height: 4.5rem;

  /* ---------- Safe areas ---------- */
  --sj-safe-top: env(safe-area-inset-top, 0px);
  --sj-safe-right: env(safe-area-inset-right, 0px);
  --sj-safe-bottom: env(safe-area-inset-bottom, 0px);
  --sj-safe-left: env(safe-area-inset-left, 0px);

  --sj-z-header: 100;
  --sj-z-bottom-nav: 100;
  --sj-z-overlay: 200;
  --sj-z-dialog: 300;
}

/*
  Reduced motion is mandatory (spec 12.6). Two independent switches:
  the OS/browser preference, and the child's in-app setting, which sets
  data-sj-reduced-motion="true" on <html>.
*/
@media (prefers-reduced-motion: reduce) {
  :root {
    --sj-duration-instant: 0ms;
    --sj-duration-fast: 0ms;
    --sj-duration-normal: 0ms;
    --sj-duration-slow: 0ms;
  }
}

html[data-sj-reduced-motion="true"] {
  --sj-duration-instant: 0ms;
  --sj-duration-fast: 0ms;
  --sj-duration-normal: 0ms;
  --sj-duration-slow: 0ms;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    /* A stagger is motion too: without this a star with a 360ms delay is simply invisible for 360ms. */
    animation-delay: 0ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-sj-reduced-motion="true"] *,
html[data-sj-reduced-motion="true"] *::before,
html[data-sj-reduced-motion="true"] *::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 0.01ms !important;
  /* A stagger is motion too: without this a star with a 360ms delay is simply invisible for 360ms. */
  animation-delay: 0ms !important;
  transition-delay: 0ms !important;
  scroll-behavior: auto !important;
}