{
 "name": "Cave",
 "version": 1,
 "color": {
  "themes": [
   {
    "id": "light",
    "name": "Light"
   },
   {
    "id": "dark",
    "name": "Dark"
   },
   {
    "id": "black",
    "name": "Black"
   }
  ],
  "tokens": [
   {
    "name": "teal",
    "value": "#179d9f",
    "usage": "Primary brand colour: section tabs, pills and the ground for reversed logos. Use as a fill or non-text mark on `paper`, `white` or `navy` (3.1–4.6:1). White text on it passes only at 24px and above (3.30:1); smaller text on teal uses `navy` (4.55:1)."
   },
   {
    "name": "teal-light",
    "value": "#51bab6",
    "usage": "The deck's documented \"Teal\" (CMYK 65/0/35/0): agility and adaptability. Linework in the patterns on `deep-teal` (3.7:1) and accent text or marks on `navy` (6.48:1). Not for text on light grounds."
   },
   {
    "name": "seafoam",
    "value": "#3fc7bd",
    "usage": "Outermost layer of the symbol. Text or marks on `navy` (7.24:1) and `charcoal` (8.13:1). Fill only on light grounds."
   },
   {
    "name": "mint",
    "value": "#65d7c9",
    "usage": "The river highlight inside the symbol. Marks on `navy` (8.67:1); fill only on light grounds."
   },
   {
    "name": "mist",
    "value": "#a6ebd8",
    "usage": "The lit cave opening in the symbol. Text on `navy` (11.09:1) and on `deep-teal` (6.32:1); dark `navy` text on it passes at 11.09:1."
   },
   {
    "name": "lagoon",
    "value": "#047283",
    "usage": "Mid layer of the symbol and the accent-text colour on light grounds: links and small teal-family text on `paper` (5.29:1) and `white` (5.62:1)."
   },
   {
    "name": "deep-teal",
    "value": "#01536b",
    "usage": "Ground of all three brand patterns and a symbol layer. White text on it passes at 8.57:1; `mist` at 6.32:1; `teal-light` linework at 3.69:1."
   },
   {
    "name": "abyss",
    "value": "#003755",
    "usage": "The shadow side of the symbol. White text on it passes at 12.52:1."
   },
   {
    "name": "midnight",
    "value": "#002347",
    "usage": "Ink of the Arabic wordmark and descriptor, and the deepest symbol layer. White text on it passes at 15.77:1. Not the same as `navy`."
   },
   {
    "name": "navy",
    "value": "#182643",
    "usage": "The deck's documented \"Navy\" (CMYK 100/85/43/47): infrastructure, security, backend stability. Ink of the English wordmark, body text on `paper` (14.15:1) and `white` (15.03:1), and the dark ground."
   },
   {
    "name": "charcoal",
    "value": "#1d1d1b",
    "usage": "Black ground used to show the reversed logo. White text on it passes at 16.88:1."
   },
   {
    "name": "white",
    "value": "#ffffff",
    "usage": "Reversed logo and text on `teal` (large only), `navy`, `charcoal`, `abyss`, `midnight` and `deep-teal`."
   },
   {
    "name": "paper",
    "value": "#f8f8f8",
    "usage": "Light page ground. The deck sets it as a faint grey brushed texture; use the flat colour in product."
   },
   {
    "name": "slate",
    "value": "#a9b3c0",
    "usage": "Secondary swatch from the deck (the deck leaves the six secondary colours unnamed; the names here are ours). Fill only: 2.0:1 on `paper`. Text on it uses `navy` (7.08:1)."
   },
   {
    "name": "coral",
    "value": "#f08868",
    "usage": "Secondary swatch. Fill only: 2.5:1 on `white`. Text on it uses `navy` (6.03:1). Sampled from the deck image, so the value is within a step or two of the original."
   },
   {
    "name": "lime",
    "value": "#a3c962",
    "usage": "Secondary swatch. Fill only on light grounds; text on it uses `navy` (7.94:1); marks on `navy` pass at 7.9:1."
   },
   {
    "name": "magenta",
    "value": "#8f2462",
    "usage": "Secondary swatch. Text and marks on `paper` (7.6:1); white text on it passes at 8.09:1."
   },
   {
    "name": "plum",
    "value": "#5e256f",
    "usage": "Secondary swatch. Text and marks on `paper` (10.0:1); white text on it passes at 10.66:1."
   },
   {
    "name": "snow",
    "value": "#f7f9fa",
    "usage": "Secondary swatch, the cool off-white. Fill only."
   },
   {
    "name": "surface",
    "value": {
     "light": "{paper}",
     "dark": "{navy}",
     "black": "{charcoal}"
    },
    "usage": "Page background in each theme. In the Black theme it is `charcoal`, the deck's black ground: near-black, not pure black."
   },
   {
    "name": "surface-raised",
    "value": {
     "light": "{white}",
     "dark": "rgba(255,255,255,0.06)",
     "black": "rgba(255,255,255,0.06)"
    },
    "usage": "Cards and panels sitting on `surface`. Text on it uses `ink` and `ink-muted`."
   },
   {
    "name": "surface-inverse",
    "value": {
     "light": "{navy}",
     "dark": "{paper}",
     "black": "{paper}"
    },
    "usage": "Deliberately opposite panels and covers. Text on it uses `ink-inverse`."
   },
   {
    "name": "ink",
    "value": {
     "light": "{navy}",
     "dark": "{white}",
     "black": "{white}"
    },
    "usage": "Body and heading text on `surface` and `surface-raised`: 14.2–15.0:1 in light, 12.6–15.0:1 in dark."
   },
   {
    "name": "ink-muted",
    "value": {
     "light": "rgba(24,38,67,0.74)",
     "dark": "rgba(255,255,255,0.74)",
     "black": "rgba(255,255,255,0.74)"
    },
    "usage": "Secondary text on `surface` and `surface-raised`: 6.2:1 on `paper` and 6.5:1 on `white` in light; 7.7:1 or more in dark."
   },
   {
    "name": "ink-inverse",
    "value": {
     "light": "{white}",
     "dark": "{navy}",
     "black": "{charcoal}"
    },
    "usage": "Text on `surface-inverse`."
   },
   {
    "name": "border",
    "value": {
     "light": "rgba(24,38,67,0.16)",
     "dark": "rgba(255,255,255,0.16)",
     "black": "rgba(255,255,255,0.16)"
    },
    "usage": "Decorative hairlines and dividers only. Carries no meaning, so it is not held to 3:1."
   },
   {
    "name": "border-strong",
    "value": {
     "light": "rgba(24,38,67,0.6)",
     "dark": "rgba(255,255,255,0.55)",
     "black": "rgba(255,255,255,0.55)"
    },
    "usage": "Borders of inputs and other controls: 4.1:1 on `paper` in light, 5.0:1 on `surface-raised` and 5.5:1 on `navy` in dark."
   },
   {
    "name": "accent",
    "value": {
     "light": "{teal}",
     "dark": "{teal}",
     "black": "{teal}"
    },
    "usage": "Fills of primary actions, tabs and markers. 3.1:1 on `paper` and 4.55:1 on `navy`, so it stands as a mark in both themes. Never for small text."
   },
   {
    "name": "on-accent",
    "value": {
     "light": "{navy}",
     "dark": "{navy}",
     "black": "{charcoal}"
    },
    "usage": "Text and icons on `accent`: 4.55:1. Text of 24px and above may be `white` (3.30:1). In the Black theme it is `charcoal` (5.1:1 on `teal`)."
   },
   {
    "name": "accent-text",
    "value": {
     "light": "{lagoon}",
     "dark": "{seafoam}",
     "black": "{seafoam}"
    },
    "usage": "Links and small accent text on `surface` and `surface-raised`: 5.3:1 on `paper` in light; 7.2:1 on `navy` and 6.1:1 on `surface-raised` in dark."
   },
   {
    "name": "focus-ring",
    "value": {
     "light": "{lagoon}",
     "dark": "{seafoam}",
     "black": "{seafoam}"
    },
    "usage": "Solid 2px focus outline with a 2px offset on `surface` and `surface-raised`: 5.3:1 or more in light, 6.1:1 or more in dark."
   },
   {
    "name": "accent-strong",
    "value": {
     "light": "{lagoon}",
     "dark": "{teal}",
     "black": "{teal}"
    },
    "usage": "Fill of primary actions (Button primary, active toggles). White text on it in light (5.6:1); `on-accent-strong` (navy) on `teal` in dark (4.55:1). Use `accent` only for brand marks and tabs."
   },
   {
    "name": "on-accent-strong",
    "value": {
     "light": "{white}",
     "dark": "{navy}",
     "black": "{charcoal}"
    },
    "usage": "Text and icons on `accent-strong`: 5.6:1 in light, 4.55:1 in dark. In the Black theme it is `charcoal` on `teal` (5.1:1)."
   },
   {
    "name": "accent-strong-hover",
    "value": {
     "light": "{deep-teal}",
     "dark": "{seafoam}",
     "black": "{seafoam}"
    },
    "usage": "Hover and pressed fill of `accent-strong`. White on it 8.57:1 in light; navy on it 7.24:1 in dark."
   },
   {
    "name": "accent-soft",
    "value": {
     "light": "rgba(166,235,216,0.45)",
     "dark": "rgba(63,199,189,0.14)",
     "black": "rgba(63,199,189,0.14)"
    },
    "usage": "Quiet brand tint: selected nav item, brand badge, highlighted row. Text on it uses `accent-text` (about 4.9:1 in light, 6:1 or more in dark)."
   },
   {
    "name": "accent-soft-border",
    "value": {
     "light": "rgba(4,114,131,0.3)",
     "dark": "rgba(63,199,189,0.3)",
     "black": "rgba(63,199,189,0.3)"
    },
    "usage": "Hairline around `accent-soft` surfaces. Decorative, carries no meaning."
   },
   {
    "name": "danger",
    "value": {
     "light": "#c53030",
     "dark": "#f56565",
     "black": "#f56565"
    },
    "usage": "Fill of destructive actions. White text on it in light (5.5:1); `on-danger` (navy) in dark (5.0:1)."
   },
   {
    "name": "on-danger",
    "value": {
     "light": "{white}",
     "dark": "{navy}",
     "black": "{charcoal}"
    },
    "usage": "Text and icons on `danger`. In the Black theme it is `charcoal` on `danger` (5.6:1)."
   },
   {
    "name": "danger-hover",
    "value": {
     "light": "#9b2c2c",
     "dark": "#fc8181",
     "black": "#fc8181"
    },
    "usage": "Hover and pressed fill of `danger`. White on it in light (7.5:1); navy on it in dark (6.2:1)."
   },
   {
    "name": "surface-sunken",
    "value": {
     "light": "rgba(24,38,67,0.04)",
     "dark": "rgba(255,255,255,0.04)",
     "black": "rgba(255,255,255,0.04)"
    },
    "usage": "Table header rows, skeletons, input wells and neutral badges sitting on `surface` or `surface-raised`. Text on it uses `ink` and `ink-muted`."
   },
   {
    "name": "surface-hover",
    "value": {
     "light": "rgba(24,38,67,0.06)",
     "dark": "rgba(255,255,255,0.08)",
     "black": "rgba(255,255,255,0.08)"
    },
    "usage": "Hover state of rows, menu items and quiet buttons."
   },
   {
    "name": "scrim",
    "value": {
     "light": "rgba(24,38,67,0.5)",
     "dark": "rgba(0,0,0,0.6)",
     "black": "rgba(0,0,0,0.7)"
    },
    "usage": "Backdrop behind dialogs and sheets. Darker in Black (70%)."
   },
   {
    "name": "disabled-bg",
    "value": {
     "light": "rgba(24,38,67,0.08)",
     "dark": "rgba(255,255,255,0.1)",
     "black": "rgba(255,255,255,0.1)"
    },
    "usage": "Fill of disabled buttons and inputs. Disabled controls are exempt from contrast rules."
   },
   {
    "name": "disabled-fg",
    "value": {
     "light": "rgba(24,38,67,0.45)",
     "dark": "rgba(255,255,255,0.45)",
     "black": "rgba(255,255,255,0.45)"
    },
    "usage": "Text and icons of disabled controls."
   },
   {
    "name": "success-bg",
    "value": {
     "light": "#f0fff4",
     "dark": "rgba(72,187,120,0.14)",
     "black": "rgba(72,187,120,0.14)"
    },
    "usage": "Background of success badges, banners and rows. Completed, paid, in stock, active. Text on it uses `success-fg` (4.5:1 or more in both themes)."
   },
   {
    "name": "success-fg",
    "value": {
     "light": "#276749",
     "dark": "#9ae6b4",
     "black": "#9ae6b4"
    },
    "usage": "Text and icons for success on `success-bg`, `surface` and `surface-raised`. Always pair with a word or icon: success and error differ little in lightness."
   },
   {
    "name": "success-border",
    "value": {
     "light": "#c6f6d5",
     "dark": "rgba(72,187,120,0.28)",
     "black": "rgba(72,187,120,0.28)"
    },
    "usage": "Hairline around success surfaces. Decorative."
   },
   {
    "name": "success-solid",
    "value": {
     "light": "#38a169",
     "dark": "#48bb78",
     "black": "#48bb78"
    },
    "usage": "Dots, bars and chart marks for success (3:1 or more on `surface` in both themes). Not for text."
   },
   {
    "name": "warning-bg",
    "value": {
     "light": "#fffaf0",
     "dark": "rgba(237,137,54,0.14)",
     "black": "rgba(237,137,54,0.14)"
    },
    "usage": "Background of warning badges, banners and rows. Needs attention: low stock, expiring, pending. Text on it uses `warning-fg` (4.5:1 or more in both themes)."
   },
   {
    "name": "warning-fg",
    "value": {
     "light": "#9c4221",
     "dark": "#fbd38d",
     "black": "#fbd38d"
    },
    "usage": "Text and icons for warning on `warning-bg`, `surface` and `surface-raised`. Always pair with a word or icon: success and error differ little in lightness."
   },
   {
    "name": "warning-border",
    "value": {
     "light": "#feebc8",
     "dark": "rgba(237,137,54,0.28)",
     "black": "rgba(237,137,54,0.28)"
    },
    "usage": "Hairline around warning surfaces. Decorative."
   },
   {
    "name": "warning-solid",
    "value": {
     "light": "#dd6b20",
     "dark": "#ed8936",
     "black": "#ed8936"
    },
    "usage": "Dots, bars and chart marks for warning (3:1 or more on `surface` in both themes). Not for text."
   },
   {
    "name": "error-bg",
    "value": {
     "light": "#fff5f5",
     "dark": "rgba(245,101,101,0.14)",
     "black": "rgba(245,101,101,0.14)"
    },
    "usage": "Background of error badges, banners and rows. Failed, overdue, cancelled, destructive. Text on it uses `error-fg` (4.5:1 or more in both themes)."
   },
   {
    "name": "error-fg",
    "value": {
     "light": "#c53030",
     "dark": "#feb2b2",
     "black": "#feb2b2"
    },
    "usage": "Text and icons for error on `error-bg`, `surface` and `surface-raised`. Always pair with a word or icon: success and error differ little in lightness."
   },
   {
    "name": "error-border",
    "value": {
     "light": "#fed7d7",
     "dark": "rgba(245,101,101,0.28)",
     "black": "rgba(245,101,101,0.28)"
    },
    "usage": "Hairline around error surfaces. Decorative."
   },
   {
    "name": "error-solid",
    "value": {
     "light": "#e53e3e",
     "dark": "#f56565",
     "black": "#f56565"
    },
    "usage": "Dots, bars and chart marks for error (3:1 or more on `surface` in both themes). Not for text."
   },
   {
    "name": "info-bg",
    "value": {
     "light": "#ebf8ff",
     "dark": "rgba(66,153,225,0.14)",
     "black": "rgba(66,153,225,0.14)"
    },
    "usage": "Background of info badges, banners and rows. Neutral news, tips, in progress. Text on it uses `info-fg` (4.5:1 or more in both themes)."
   },
   {
    "name": "info-fg",
    "value": {
     "light": "#2c5282",
     "dark": "#90cdf4",
     "black": "#90cdf4"
    },
    "usage": "Text and icons for info on `info-bg`, `surface` and `surface-raised`. Always pair with a word or icon: success and error differ little in lightness."
   },
   {
    "name": "info-border",
    "value": {
     "light": "#bee3f8",
     "dark": "rgba(66,153,225,0.28)",
     "black": "rgba(66,153,225,0.28)"
    },
    "usage": "Hairline around info surfaces. Decorative."
   },
   {
    "name": "info-solid",
    "value": {
     "light": "#3182ce",
     "dark": "#4299e1",
     "black": "#4299e1"
    },
    "usage": "Dots, bars and chart marks for info (3:1 or more on `surface` in both themes). Not for text."
   },
   {
    "name": "chart-1",
    "value": {
     "light": "#047283",
     "dark": "#3fc7bd",
     "black": "#3fc7bd"
    },
    "usage": "First series, and the only series of a single-series chart: lagoon on light (5.3:1 on paper), seafoam on dark (7.2:1 on navy)."
   },
   {
    "name": "chart-2",
    "value": {
     "light": "#8f2462",
     "dark": "#f08868",
     "black": "#f08868"
    },
    "usage": "Second series: magenta on light (7.6:1), coral on dark (6.0:1). Differs from `chart-1` in lightness and hue."
   },
   {
    "name": "chart-3",
    "value": {
     "light": "#a85f49",
     "dark": "#a3c962",
     "black": "#a3c962"
    },
    "usage": "Third series: a darkened coral on light (4.5:1), lime on dark (7.9:1)."
   },
   {
    "name": "chart-4",
    "value": {
     "light": "#182643",
     "dark": "#a6ebd8",
     "black": "#a6ebd8"
    },
    "usage": "Fourth series: navy on light, mist on dark. Never add a fifth; group the rest as Other."
   }
  ]
 },
 "type": {
  "fonts": [
   {
    "family": "Hero",
    "file": "fonts/Hero-Light.otf",
    "weight": "300"
   },
   {
    "family": "Hero",
    "file": "fonts/Hero.otf",
    "weight": "400"
   },
   {
    "family": "Poppins",
    "file": "fonts/Poppins-Light.ttf",
    "weight": "300"
   },
   {
    "family": "Poppins",
    "file": "fonts/Poppins-Regular.ttf",
    "weight": "400"
   },
   {
    "family": "Poppins",
    "file": "fonts/Poppins-Italic.ttf",
    "weight": "400",
    "style": "italic"
   },
   {
    "family": "Poppins",
    "file": "fonts/Poppins-Medium.ttf",
    "weight": "500"
   },
   {
    "family": "Poppins",
    "file": "fonts/Poppins-SemiBold.ttf",
    "weight": "600"
   },
   {
    "family": "Poppins",
    "file": "fonts/Poppins-Bold.ttf",
    "weight": "700"
   },
   {
    "family": "Blue Ocean",
    "file": "fonts/BlueOcean.ttf",
    "weight": "400"
   },
   {
    "family": "Almarai",
    "file": "fonts/Almarai-Light.ttf",
    "weight": "300"
   },
   {
    "family": "Almarai",
    "file": "fonts/Almarai-Regular.ttf",
    "weight": "400"
   },
   {
    "family": "Almarai",
    "file": "fonts/Almarai-Bold.ttf",
    "weight": "700"
   },
   {
    "family": "Almarai",
    "file": "fonts/Almarai-ExtraBold.ttf",
    "weight": "800"
   }
  ],
  "families": {
   "display": "\"Hero\", \"Poppins\", system-ui, sans-serif",
   "sans": "\"Poppins\", system-ui, sans-serif",
   "ar-display": "\"Almarai\", \"Poppins\", system-ui, sans-serif",
   "ar-text": "\"Almarai\", \"Poppins\", system-ui, sans-serif"
  },
  "groups": [
   {
    "name": "Display",
    "family": "display",
    "styles": [
     {
      "name": "display-xl",
      "fontSize": "64px",
      "lineHeight": "68px",
      "fontWeight": 400,
      "usage": "Hero, English. Page titles and cover lines. Sentence case or capitals, as in the deck's GOAL and SYMBOLS tabs.",
      "sample": "Software solutions for real-life problems"
     },
     {
      "name": "display-lg",
      "fontSize": "48px",
      "lineHeight": "52px",
      "fontWeight": 400,
      "usage": "Hero, English. Section titles.",
      "sample": "Software solutions for real-life problems"
     },
     {
      "name": "heading-lg",
      "fontSize": "32px",
      "lineHeight": "40px",
      "fontWeight": 400,
      "usage": "Hero, English. Headings, and the text of a `SectionTag` set in white on `teal`.",
      "sample": "Software solutions for real-life problems"
     },
     {
      "name": "heading-md",
      "fontSize": "24px",
      "lineHeight": "32px",
      "fontWeight": 400,
      "usage": "Hero, English. Sub-headings. The smallest size at which white text on `teal` passes.",
      "sample": "Software solutions for real-life problems"
     }
    ]
   },
   {
    "name": "Text",
    "family": "sans",
    "styles": [
     {
      "name": "body-lg",
      "fontSize": "18px",
      "lineHeight": "28px",
      "fontWeight": 400,
      "usage": "Poppins Regular. Lead paragraphs, as in the deck's goal statement.",
      "sample": "Software solutions for real-life problems"
     },
     {
      "name": "body",
      "fontSize": "16px",
      "lineHeight": "24px",
      "fontWeight": 400,
      "usage": "Poppins Regular. Default body copy.",
      "sample": "Software solutions for real-life problems"
     },
     {
      "name": "body-sm",
      "fontSize": "14px",
      "lineHeight": "20px",
      "fontWeight": 400,
      "usage": "Poppins Regular. Secondary copy, table cells, footer contact lines.",
      "sample": "Software solutions for real-life problems"
     },
     {
      "name": "caption",
      "fontSize": "12px",
      "lineHeight": "16px",
      "fontWeight": 400,
      "usage": "Poppins Regular. Captions and fine print.",
      "sample": "Software solutions for real-life problems"
     },
     {
      "name": "body-strong",
      "fontSize": "16px",
      "lineHeight": "24px",
      "fontWeight": 600,
      "usage": "Poppins SemiBold. Emphasis inside body copy and callout titles (the deck uses Poppins Bold for these).",
      "sample": "Software solutions for real-life problems"
     },
     {
      "name": "label",
      "fontSize": "14px",
      "lineHeight": "20px",
      "fontWeight": 500,
      "usage": "Poppins Medium, set in capitals with wide tracking. Short labels only, never sentences. The old descriptor line under the wordmark used this treatment.",
      "letterSpacing": "0.2em",
      "sample": "CAPITALS LABEL"
     },
     {
      "name": "page-title",
      "fontSize": "24px",
      "lineHeight": "32px",
      "fontWeight": 600,
      "usage": "Poppins SemiBold. Page titles inside the products (consoles, POS, app bars). Hero stays for brand moments: landing, sign-in, splash.",
      "sample": "Orders"
     },
     {
      "name": "section-title",
      "fontSize": "18px",
      "lineHeight": "28px",
      "fontWeight": 600,
      "usage": "Poppins SemiBold. Card and dialog titles.",
      "sample": "Recent orders"
     },
     {
      "name": "table-head",
      "fontSize": "12px",
      "lineHeight": "16px",
      "fontWeight": 600,
      "usage": "Poppins SemiBold. Table column headers and form section labels, in sentence case.",
      "sample": "Customer"
     }
    ]
   },
   {
    "name": "Arabic display",
    "family": "ar-display",
    "styles": [
     {
      "name": "ar-display",
      "fontSize": "56px",
      "lineHeight": "76px",
      "fontWeight": 300,
      "usage": "Almarai Light, Arabic. Titles and brand moments. About 1.18x the size of the English display so the two look equally light; Blue Ocean is far heavier than Hero and made the Arabic look bold beside it.",
      "sample": "للحلول البرمجية"
     },
     {
      "name": "ar-heading",
      "fontSize": "32px",
      "lineHeight": "46px",
      "fontWeight": 300,
      "usage": "Almarai Light, Arabic. Headings at brand moments.",
      "sample": "للحلول البرمجية"
     }
    ]
   },
   {
    "name": "Arabic text",
    "family": "ar-text",
    "styles": [
     {
      "name": "ar-body",
      "fontSize": "16px",
      "lineHeight": "28px",
      "fontWeight": 400,
      "usage": "Almarai Regular, Arabic. Body copy and the descriptor line. Set right to left with `dir=\"rtl\"`.",
      "sample": "للحلول البرمجية"
     },
     {
      "name": "ar-body-sm",
      "fontSize": "14px",
      "lineHeight": "24px",
      "fontWeight": 400,
      "usage": "Almarai Regular, Arabic. Secondary copy and footer contact lines.",
      "sample": "للحلول البرمجية"
     },
     {
      "name": "ar-body-strong",
      "fontSize": "16px",
      "lineHeight": "28px",
      "fontWeight": 700,
      "usage": "Almarai Bold, Arabic. Emphasis and callout titles.",
      "sample": "للحلول البرمجية"
     },
     {
      "name": "ar-page-title",
      "fontSize": "24px",
      "lineHeight": "36px",
      "fontWeight": 700,
      "usage": "Almarai Bold, Arabic. Page titles inside the products. Brand moments use ar-display (Almarai Light).",
      "sample": "الطلبات"
     },
     {
      "name": "ar-section-title",
      "fontSize": "18px",
      "lineHeight": "30px",
      "fontWeight": 700,
      "usage": "Almarai Bold, Arabic. Card and dialog titles.",
      "sample": "أحدث الطلبات"
     }
    ]
   }
  ]
 },
 "spacing": {
  "note": "Proposed 4px base. space-1 to space-6 are indexed; space-12, space-32 and space-48 are named by pixels because the shipped apps use those steps.",
  "tokens": [
   {
    "name": "space-1",
    "value": "4px",
    "usage": "Proposed. Hairline gaps, icon-to-label."
   },
   {
    "name": "space-2",
    "value": "8px",
    "usage": "Proposed. Tight stacks; stroke weight of the cover's arches."
   },
   {
    "name": "space-3",
    "value": "16px",
    "usage": "Proposed. Control padding, gaps between related items."
   },
   {
    "name": "space-4",
    "value": "24px",
    "usage": "Proposed. Card padding."
   },
   {
    "name": "space-5",
    "value": "40px",
    "usage": "Proposed. Between groups within a section."
   },
   {
    "name": "space-6",
    "value": "64px",
    "usage": "Proposed. Between sections."
   },
   {
    "name": "space-12",
    "value": "12px",
    "usage": "Input padding, compact control padding, table cell padding."
   },
   {
    "name": "space-32",
    "value": "32px",
    "usage": "Page gutters on desktop, space between cards."
   },
   {
    "name": "space-48",
    "value": "48px",
    "usage": "Large section gaps in product pages."
   }
  ]
 },
 "radius": {
  "note": "Pill is read from the deck (the section tabs). The others are taken from the shipped web, mobile and POS apps so the three products and this system agree.",
  "tokens": [
   {
    "name": "radius-sm",
    "value": "8px",
    "usage": "Small controls inside dense tables, tags, thumbnails."
   },
   {
    "name": "radius-control",
    "value": "10px",
    "usage": "Buttons, inputs, selects, menu items and nav items. Rectangular controls, never pills."
   },
   {
    "name": "radius-md",
    "value": "14px",
    "usage": "Cards, panels and table cards."
   },
   {
    "name": "radius-lg",
    "value": "18px",
    "usage": "Dialogs, bottom sheets and popovers."
   },
   {
    "name": "radius-xl",
    "value": "32px",
    "usage": "Image frames and hero panels."
   },
   {
    "name": "radius-pill",
    "value": "9999px",
    "usage": "From the deck: the section tabs (GOAL, SYMBOLS, COLORS). Also badges, chips and avatars. Not buttons."
   }
  ]
 },
 "shadow": {
  "note": "The brand is flat. Product surfaces use borders; shadows are only for layers that float above the page.",
  "tokens": [
   {
    "name": "shadow-menu",
    "value": {
     "light": "0 4px 12px rgba(24,38,67,0.12)",
     "dark": "0 4px 12px rgba(0,0,0,0.5)",
     "black": "0 4px 12px rgba(0,0,0,0.6)"
    },
    "usage": "Menus, popovers, toasts."
   },
   {
    "name": "shadow-overlay",
    "value": {
     "light": "0 12px 32px rgba(24,38,67,0.16)",
     "dark": "0 12px 32px rgba(0,0,0,0.6)",
     "black": "0 12px 32px rgba(0,0,0,0.7)"
    },
    "usage": "Dialogs and bottom sheets."
   }
  ]
 },
 "duration": {
  "note": "Respect prefers-reduced-motion: drop transitions and shorten loops.",
  "tokens": [
   {
    "name": "duration-fast",
    "value": "150ms",
    "usage": "Hover, focus and press transitions."
   },
   {
    "name": "duration-base",
    "value": "200ms",
    "usage": "Opening and closing dialogs, menus, toasts."
   }
  ]
 },
 "easing": {
  "tokens": [
   {
    "name": "easing-standard",
    "value": "cubic-bezier(0.2,0,0,1)",
    "usage": "All transitions."
   }
  ]
 },
 "zIndex": {
  "tokens": [
   {
    "name": "z-sticky",
    "value": "100",
    "usage": "Sticky headers and sidebars."
   },
   {
    "name": "z-dropdown",
    "value": "1000",
    "usage": "Menus and popovers."
   },
   {
    "name": "z-modal",
    "value": "1100",
    "usage": "Scrim and dialog."
   },
   {
    "name": "z-toast",
    "value": "1200",
    "usage": "Toasts above everything."
   }
  ]
 }
}